<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <!-- <div id="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>

    </div>
    <div id="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>

    </div> -->
    <script>
        // 点击box alert 对应下标
        // var box=document.getElementById('box');
        // for(var a=0;a<box.length;a++){
        //     box[a].index=a;
        //     box[a].onclick=function(){
        //         alert(this.index)
        //     }
        // }
        // 1) let拥有块级作用域
        // 2） let不存在变量的提前声明
        // 3） let不能重复声明
        // 4） let 虽然是块级作用域但是不影响作用域链
        // 点击box alert对应下标
        // var box=document.getElementById('box');
        // for(var a;a<box.length;a++){
        //     box[a].index=a;
        //     box[a].onclick=function(){
        //         alert(this.index)
        //     }
        // }
        // 1)let拥有块级作用域
        // 2.let不存在变量的提前声明
        // 3.let不能重复声明
        // 4.虽然是块级作用域但是不影响作用域链
        // 点击box alert 对应下标
        // var box=document.getElementById('box');
        // for(var a=0;a<box.length;a++){
        //     box[a].index=a;
        //     box[a].onclick=function(){
        //         alert(this.index)
        //     }
        // }
        // 点击box alert 对应下标
        // 1）let拥有块级作用域
        // 2）let不存在变量的提前声明
        // 3）let不能重复声明
        // 4）虽然是块级作用域但是不影响作用域链
        for (let i = 0; i < box.length; i++) {
            box[i].onclick = function() {
                alert(i)
            }
        }

        {
            let girl = '班长';
        }
        // console.log(girl);
        let yuzong = '没我帅';

        {
            let girl = '班长';

            function fn() {
                console.log(girl);
            }
            fn()
        }

        // for (let i = 0; i < box.length; i++) {
        //     box[i].onclick = function() {
        //         alert(i)
        //     }
        // }

        // {
        //     let girl = '班长';
        // }
        // //console.log(girl);
        // let yuzong = '没我帅';

        // {
        //     let girl = "班长";

        //     function fn() {
        //         console.log(girl);
        //     }
        //     fn()
        // }

        // for (let i = 0; i < box.length; i++) {
        //     box[i].onclick = function() {
        //         alert(i)
        //     }
        // } {
        //     let girl = "班长";
        // }
        // // console.log(girl);
        // let yuzong = "没我帅"; {
        //     let girl = '班长';

        //     function fn() {
        //         console.log(girl);
        //     }
        //     fn()
        // }
    </script>

</body>

</html>